<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>temperature demo</title>

</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script src="echarts_package/echarts.js"></script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    function UpdateData() {

        if (window.XMLHttpRequest)
        {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
            var xmlhttp=new XMLHttpRequest();
        }
        else
        {
            //IE6, IE5 浏览器执行的代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var temperature_num=Number(JSON.parse(xmlhttp.responseText))
                option.series[0].data[0].value=temperature_num;
            }
        }
        xmlhttp.open("GET","update.php",true);
        xmlhttp.send();



    }
    option = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}℃"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '植物状态',
                type: 'gauge',
                detail: {formatter:'{value}℃'},
                data: [{value: 0, name: '温度'}]
            }
        ]
    };
    setInterval(function () {
        UpdateData();
        //option.series[0].data[0].value = <?=$json_tem?>;
        myChart.setOption(option, true);
    },2000);
</script>

</body>
</html>
